<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="!pageLoading">
			<view class="search-box p-20">
				<u-search placeholder="请输入搜索关键字" v-model="search.q"  @custom="doSearch"></u-search>
			</view>
			<view class="p-30" :style="{fontSize:'16px',color:'#333',fontWeight:'bold'}">镇川好物精选</view>
			<view class="featured-merchant" :style="{backgroundImage: `url(${info.featuredMerchant.coverImage})`}">
				<view class="info">
					<view class="left">
						<view style="font-size: 14px;">{{info.featuredMerchant.name}}</view>
						<view class="mt-20 line-2" style="font-size: 12px;">{{info.featuredMerchant.description}}</view>
					</view>
					<view class="right">{{info.featuredMerchant.distance}}km</view>
				</view>
			</view>
			<view class="px-30 mt-30">
				<scroll-view class="scroll-list " scroll-x="true">
					<view class="item products-item" style="width: 140px;" v-for="item in info.featuredProducts">
						<u-image :src="item.image" height="140"></u-image>
						<view class="info">
							<view style="font-size: 14px;color:#333;">{{item.name}}</view>
							<view class="mt-10" style="font-size: 12px;color:#999;">{{item.description}}</view>
						</view>
						<view class="category">{{item.category}}</view>
					</view>
				</scroll-view>
			</view>
			<!-- 
			<view class="products">
				<view class="products-item" v-for="item in info.featuredProducts">
					<u-image :src="item.image" height="150"></u-image>
					<view class="info">
						<view>{{item.name}}</view>
						<view>{{item.description}}</view>
					</view>
					<view class="category">{{item.category}}</view>
				</view>
			</view> -->
			<view class="p-30" :style="{fontSize:'16px',color:'#333',fontWeight:'bold'}">发现商户</view>
			<view class="featured-merchant" :style="{backgroundImage: `url(${info.featuredMerchant.coverImage})`}">
				<view class="info">
					<view class="left">
						<view style="font-size: 14px;">{{info.featuredMerchant.name}}</view>
						<view class="mt-20 line-2" style="font-size: 12px;">{{info.featuredMerchant.description}}</view>
					</view>
					<view class="right">{{info.featuredMerchant.distance}}km</view>
				</view>
			</view>
			<view class="merchant-list mt-30">
				<view class="merchant-item" v-for="item in info.merchantList">
					<u-image width="100" height="100" radius="10" :src="item.coverImage"></u-image>
					<view class="info">
						<view style="font-size: 14px;color:#333;">{{item.name}}</view>
						<view class="mt-10" style="font-size: 12px;color:#999;">{{item.description}}</view>
						<view class="tags mt-20">
							<text v-for="v in item.tags">{{v.text}}</text>
						</view>
					</view>
					<view class="distance">{{item.distance}}km</view>
				</view>
			</view>
			<view style="height:15px"></view>
		</view>
	</view>
</template>

<script>
	import {
		getPageTreasures,
	} from '@/config/api.js';
	export default {
		data() {
			return {
				pageLoading: true,
				search:{
					q:'',
				},
				info: [],
			}
		},
		onLoad() {
			this.getPageData(() => {
				this.pageLoading = false;
			});
		},
		onPullDownRefresh() {
			this.getPageData(function() {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			doSearch(){
				console.log(this.search.q)
				console.log(encodeURIComponent(this.search.q))
				this.navTo('/pages/commerce/interaction/index',{q:this.search.q});
			},
			getPageData(cb) {
				getPageTreasures().then(res => {
					this.info = res.layout;
					this.pageLoading = false;
					typeof cb == 'function' && cb();
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.products-item {
		background-color: white;
		overflow: hidden;
		border-radius: 10px;
		position: relative;

		.category {
			display: inline-block;
			padding: 2px 8px;
			border-radius: 5px;
			background-color: lightcoral;
			color: white;
			position: absolute;
			right: 5px;
			top: 5px;
			font-size: 12px;
		}

		.info {
			padding: 10px;
		}
	}

	.featured-merchant {
		position: relative;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		width: calc(100% - 60rpx);
		margin-left: auto;
		margin-right: auto;
		height: 150px;
		overflow: hidden;
		border-radius: 10px;

		&::after {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.info {
			position: absolute;
			z-index: 2;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: flex-end;
			padding: 15px;
			color: white;

			.left {
				flex-grow: 1;
				padding-right: 15px;
			}

			.right {
				color: white;
				font-size: 12px;
				flex-shrink: 0;
				display: inline-block;
				border-radius: 5px;
				padding: 2px 8px;
				background-color: rgba(187, 187, 187, 0.5);
			}
		}

	}

	.merchant-list {
		width: calc(100% - 60rpx);
		margin: 0 30rpx;

		.merchant-item {
			display: flex;
			padding: 20rpx;
			background-color: white;
			overflow: hidden;
			border-radius: 10px;
			margin-bottom: 30rpx;

			.info {
				flex-grow: 1;
				padding: 0 10px;
			}

			.distance {
				flex-shrink: 0;
				color: #999;
				font-size: 14px;
			}

			.tags {
				margin-left: -4px;
				margin-right: -4px;

				&>text {
					display: inline-block;
					padding: 2px 8px;
					border-radius: 5px;
					background-color: lightgoldenrodyellow;
					color: #666;
					margin: 4px;
					font-size: 11px;
				}
			}
		}
	}

	/* 横向滚动列表样式 */
	.scroll-list {
		white-space: nowrap;
		width: 100%;

		.item {
			display: inline-block;
			margin-right: 10px;
		}
	}
</style>